
//地图旁边的进度条
var progress2chart="";
function progress2char(){
	progress2chart = echarts.init(document.getElementById("progress2-chart"));
	var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888,0.987,0.432];
	var grayBar = [1, 1, 1, 1, 1,1,1 ];
	var xingm =["万安", "金山", "白马", "新盛", "鄢家","略坪","调元"];
	option = {
	    title: {
	        text: '自然灾害占比情况',
	        left: '20%',
	        top:"20%",
	        textStyle:{
	        	color:"#fff",
	        	fontSize:12
	        }
	    },
	     grid: {
	         left: '32%',  //如果离左边太远就用这个......
	         right: '25%',
	         bottom: '35%',
	         top: '25%',
	         containLabel: true
	     },
	    xAxis: [{
	            show: false,
	       },
	        {
	            show: false,
	        }
	    ],
	    yAxis: {
	        type: 'category',
	        axisLabel: {
	            show: true, //让Y轴数据不显示
	        },

	        axisTick: {
	            show: false, //隐藏Y轴刻度
	        },
	        axisLine: {
	            show: false, //隐藏Y轴线段
	        },
	    },
	    series: [
	        //背景色
	        {
	            show: true,
	            type: 'bar',
	            barGap: '-100%',
	            barWidth: '10%', //统计条宽度 
	            itemStyle: {
	                normal: {
	                    barBorderRadius: 50,
	                    color: 'rgba(41, 55, 94)'
	                },
	            },
	            label: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        color: '#fff', //百分比颜色
	                    },
	                     position: 'right',
	                    formatter: function(data) {
	                    	return baifenbi[data.dataIndex]+'%'  
	                    },
	                    
	                }
	            },
	            z: 1,
	            data: grayBar,
	        },
	        //蓝条
	        {
	            show: true,
	            type: 'bar',
	            barGap: '-100%',
	            barWidth: '10%', //统计条宽度
	            itemStyle: {
	                normal: {
	                    barBorderRadius: 50, //统计条弧度
	                    color:"#ffa322"
	                },
	            },
	            max: 1,
	            label: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        color: '#fff', //百分比颜色
	                    },
	                    position:"left",
	                    formatter: function(data) {
	                        //富文本固定格式{colorName|这里填你想要写的内容}
	                        		return  xingm[data.dataIndex]      
	                    },
	                    
	                }
	            },
	          data: baifenbi,
	        },
	        
	    ]
	};
	progress2chart.setOption(option)
}

//地图
var mapchart="";
function mapchar(){
	
 
	let color= ['#ed8884', '#ff9f7f', '#006cff','#60cda0']//'#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
	var markPointData = [{
		name: "罗江区气象局",
		coord: [
			104.507653,31.320943  //坐标，通过百度地图提取
		],
		itemStyle:{
			normal:{
				color:color[0]
			}
		},
		// symbol: '/img/1.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "新盛镇卫生院",
		coord: [
			104.64488,31.271227
		],
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江县新盛镇土城社区村民委员会",
		coord: [
			104.607272,31.257105
		],
		itemStyle:{
			normal:{
				color:color[2]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江区调元镇顺河村村委会",
		coord: [
			104.494823,31.381504
		],
		itemStyle:{
			normal:{
				color:color[3]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "中共罗江县白马关镇委员会",
		coord: [
			104.522285,31.247381
		],
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "白马关镇",
		coord: [
			104.458958,31.297164
		],
		itemStyle:{
			normal:{
				color:color[3]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "鄢家镇人民政府",
		coord: [
			104.58263,31.288613
		],
		itemStyle:{
			normal:{
				color:color[2]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江县公安局鄢家派出所",
		coord: [
			104.574718,31.291884
		],
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "调元派出所",
		coord: [
			104.477219,31.375766
		],
		itemStyle:{
			normal:{
				color:color[0]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "调元镇卫生院",
		coord: [
			104.473531,31.375379
		],
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江万安镇升平小区",
		coord: [
			104.513329,31.316732
		],
		itemStyle:{
			normal:{
				color:color[2]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江县天然气有限公司",
		coord: [
			104.511175,31.299704
		],
		itemStyle:{
			normal:{
				color:color[3]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江县新盛镇土城社区村民委员会",
		coord: [
			104.607272,31.257105
		],
		itemStyle:{
			normal:{
				color:color[2]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江万安小区",
		coord: [
			104.513377,31.315361
		],
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		// symbol: '/img/2.png',  // 标注图片地址路径
		symbolSize: 40,
	},{
		name: "罗江县龙洲天然气有限责任公司",
		itemStyle:{
			normal:{
				color:color[0]
			}
		},
		coord: [
			104.541597,31.384088
		],
		// symbol: '/img/3.png',  // 标注图片地址路径
		symbolSize: 40,
	},
	{
		name: "罗江县略坪镇政府",
		itemStyle:{
			normal:{
				color:color[1]
			}
		},
		coord: [
			104.411794,31.339464
		],
		// symbol: '/img/3.png',  // 标注图片地址路径
		symbolSize: 40,
	}

   
];
let itemStyle={
    normal: {
        areaColor: 'rgba(120,152,225, 0.2)',
        borderColor: '#00d887',
        borderWidth: 2,
        shadowBlur: 10,
        areaColor: 'rgba(120,152,225, 0.3)',
    },
    emphasis: {
        areaColor: 'rgba(120,152,225, 0.8)'
    }
}

    var uploadedDataURL = "js/luojiang.json";
   		mapchart= echarts.init(document.getElementById("map-chart"));
	$.getJSON(uploadedDataURL, function(geoJson) {
    	echarts.registerMap('LJ', geoJson);
	    option = {
	        tooltip: {
	            trigger: 'item',
	            formatter: function(params) {
	            	//console.log(params)
	                if (typeof(params.value)[2] == "undefined") {
	                    return params.name
	                } else {
	                    return params.name + ' : ' + params.value[2];
	                }
	            }
	        },
	        geo: {
	            show: true,
	            map: 'LJ',
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            roam: false,
	            left:'6%',
	            right:'5%',
	            top:"8%",
	            itemStyle: {
	                normal: {
	                    borderColor: '#4085d3',
		                borderWidth: 2,
		                shadowColor: '#000',
		                shadowBlur: 50,
		                areaColor: '#565cf8',
	                },
	                emphasis: {
	                    areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
	                }
	            }
	        },
            series: [
                {
                    name: '香港18区人口密度',
                    type: 'map',
                    mapType: 'LJ', // 自定义扩展图表类型
                    label: {
                        show: true,
                        color:'#fff'
                    },
                    markPoint: { //图表标注。
                        label: {
                            normal: {
                                show: true,
                            },
                            emphasis: {
                                show: true,
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(72,150,128,1)'
                            }
                        },
                        data: markPointData
                    },
                    zoom: 1.2,
                    // opacity: 0.3,
                    data: [
                        {name: '蟠龙镇', value: 20057.34, itemStyle:itemStyle ,
                       
                    
                    },
                        {name: '御营镇', value: 15477.48,itemStyle:itemStyle },
                        {name: '金山镇', value: 31686.1,itemStyle:itemStyle },
                        {name: '慧觉镇', value: 6992.6,itemStyle:itemStyle },
                        {name: '鄢家镇', value: 44045.49,itemStyle:itemStyle },
                        {name: '新盛镇', value: 40689.64,itemStyle:itemStyle },
                        {name: '略坪镇', value: 37659.78,itemStyle:itemStyle },
                        {name: '白马关镇', value: 45180.97,itemStyle:itemStyle },
                        {name: '调元镇', value: 55204.26,itemStyle:itemStyle },
                        {name: '万安镇', value: 21900.9,itemStyle:itemStyle },
                        
                    ],
                    
                }
            ]
	    };
    	//myChart.setOption(option);
    	mapchart.setOption(option);
	    mapchart.on('click',function(params){ //点击事件
	    		alert(params) 
            });
	});	
};




















